<template>
	<div class="system-menu-container">
		<el-card shadow="hover">
			<div class="system-menu-search mb15">
				<el-input size="default" placeholder="请输入菜单名称" style="max-width: 180px"> </el-input>
				<el-button size="default" type="primary" class="ml10">
					<el-icon>
						<ele-Search />
					</el-icon>
					查询
				</el-button>
				<el-button size="default" type="primary" plain class="ml10" @click="handleAddDialog()">
					<el-icon>
						<ele-FolderAdd />
					</el-icon>
					新增
				</el-button>
				<el-button size="default" type="primary" plain class="ml10" @click="handleGroup()">
					<el-icon>
						<ele-FolderAdd />
					</el-icon>
					分组管理
				</el-button>
			</div>
			<el-table :data="tableData" style="width: 100%" row-key="path" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
				<el-table-column type="index" show-overflow-tooltip></el-table-column>
				<el-table-column prop="name" label="名称" show-overflow-tooltip></el-table-column>
				<el-table-column prop="apis" label="路径" show-overflow-tooltip></el-table-column>
				<el-table-column prop="created_at" label="创建时间" show-overflow-tooltip></el-table-column>
				<el-table-column prop="content" label="分组" show-overflow-tooltip>
					<template #default="scope">
						<span>{{ scope.row.group.name }}</span>
					</template>
				</el-table-column>
				<el-table-column prop="content" label="简介" show-overflow-tooltip> </el-table-column>
				<el-table-column prop="method" label="请求" show-overflow-tooltip width="100">
					<template #default="scope">
						<el-tag type="success" v-if="scope.row.method === 'get'">{{ scope.row.method }}</el-tag>
						<el-tag type="warning" v-else-if="scope.row.method === 'post'">{{ scope.row.method }}</el-tag>
					</template>
				</el-table-column>
				<el-table-column label="操作" show-overflow-tooltip width="140">
					<template #default="scope">
						<el-button size="small" text type="primary" @click="handleEditDialog(scope.row)">修改</el-button>
						<el-button size="small" text type="primary" @click="handleDelApi(scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-card>
		<AddApi v-model="isShowAddDialog" v-if="isShowAddDialog" @refresh="getApiLists(1)" />
		<EditApi v-model="isShowEditDialog" v-if="isShowEditDialog" :getData="editApiData" @refresh="getApiLists(1)" />
		<ApiGroup v-model="isShowGroupDialog" v-if="isShowGroupDialog" />
	</div>
</template>

<script setup name="systemApi">
import AddApi from './component/addApi.vue';
import EditApi from './component/editApi.vue';
import ApiGroup from './component/ApiGroup/index.vue';
import { getApiList, delApi } from '@/api/system/api';
import { ElMessage, ElMessageBox } from 'element-plus';

const tableData = ref([]);
const getApiLists = async (type) => {
	// let params = {};
	// if (type === 1) {
	// 	params.loading = false;
	// }
	let res = await getApiList();
	// console.log(res);
	if (res.code === 0) {
		tableData.value = res.data;
	}
};
getApiLists();

// 打开新增api弹窗
const isShowAddDialog = ref(false);
const handleAddDialog = () => {
	isShowAddDialog.value = true;
};
// 打开修改api弹窗
const isShowEditDialog = ref(false);
const editApiData = ref(null);
const handleEditDialog = (row) => {
	editApiData.value = row;
	isShowEditDialog.value = true;
};

// 删除api
const handleDelApi = (row) => {
	ElMessageBox.confirm(`此操作将永久删除接口：${row.name}, 是否继续?`, '提示', {
		confirmButtonText: '删除',
		cancelButtonText: '取消',
		type: 'warning',
	})
		.then(async () => {
			let res = await delApi({ id: row.id });
			if (res.code === 0) {
				ElMessage.success('删除成功');
				getApiLists();
			} else {
				ElMessage.error('删除失败');
			}
		})
		.catch(() => {});
};

// 打开分组弹窗
const isShowGroupDialog = ref(false);
const handleGroup = () => {
	isShowGroupDialog.value = true;
};
</script>

<style lang="scss" scoped>
</style>